<template>
    <el-tag round effect="light" :type="tagType">{{tagText}}</el-tag>
    <span>{{statusText}}</span>
</template>

<script lang="ts" setup>
    import { ref, reactive, watchEffect } from 'vue'
    const props = defineProps([
        'step'
    ])

    const tagType = ref('')
    const tagText = ref('')
    const statusText = ref('')

    /**
     * 监听步骤变化给出对应的状态
     * 
     * 1.watch: 既要指明监视的属性，也要指明监视的回调。
     * 2.watchEffect: 不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
     */
     watchEffect(() => {
        switch (props.step) {
            case "EXCEL_UPLOAD":
                tagType.value = ''
                tagText.value = '步骤1'
                statusText.value = '上传项目信息'
                break
            case "RESULT_CHECK":
                tagType.value = ''
                tagText.value = '步骤2'
                statusText.value = '识别结果检查'
                break
            case "RESULT_QUERY":
                tagType.value = 'warning'
                tagText.value = '步骤3'
                statusText.value = '启动查询结果'
                break
            case "RESULT_UPDATE":
                tagType.value = 'info'
                tagText.value = '步骤4'
                statusText.value = '修订分析结果'
                break
            case "REPORT_UPDATE":
                tagType.value = 'danger'
                tagText.value = '步骤5'
                statusText.value = '修订尽调报告'
                break
            case "PROJECT_COMPLETED":
                tagType.value = 'success'
                tagText.value = '步骤6'
                statusText.value = '尽调任务小结'
                break
            default:
                break
        }
    })
</script>

<style scoped>

</style>